import React from 'react';
import styles from './index.less';
import Card from '../Card';
import {Collapse, Empty, Icon, Tag, Tooltip} from "antd";


export interface LabelsProps {
  [propName: string]: any;
}

const TagsCard: React.FC<LabelsProps> = (props) => {
  const customPanelStyle = {
    border: 0,
  };
  const labelInfo: any[] = [{
    "groupId": "999999",
    "groupName": "Default",
    "isVisible": "Y",
    "order": "1",
    "groupAttrs": [{"attrCode": null, "attrValue": null}],
    "labelInfo": [{"labelKey": "LabelThree", "labelValue": "Scientist"}, {
      "labelKey": "LabelOne",
      "labelValue": "2019 Nobel Prize in chemistry"
    }]
  }];
  const labelActivity: any[] = ["1"];
  return (
    <div>
      <Card>
        <div className={styles.labelTitle}>Tags</div>
        {labelInfo && labelInfo.length > 0 ? (
          <Collapse
            bordered={false}
            expandIconPosition="right"
            expandIcon={({isActive}) => (
              <Icon type="down-circle" style={{color: '#AEAEAE', left: 'auto', right: '16px',}}
                    rotate={isActive ? 180 : 0}/>
            )}
            defaultActiveKey={labelActivity}
            className={styles.panelStyles}
          >
            {labelInfo.map(e => {
              const {groupName, order, groupAttrs = [], labelInfo: tags = []} = e;
              let color = 'grey';
              groupAttrs.map((attr: any) => {
                const {attrCode, attrValue} = attr;
                if (attrCode === 'Color') {
                  color = attrValue;
                }
                return attr;
              });
              return (
                <Collapse.Panel
                  header={
                    <div style={{lineHeight: '16px',}}>
                      <Icon type="tag" theme="filled" rotate={270} style={{color}}/>
                      <Tooltip placement="topLeft" title={groupName} className={styles.labelTitle}>
                        <span style={{color}}>{groupName}</span>
                      </Tooltip>
                    </div>
                  }
                  key={order}
                  style={customPanelStyle}
                >
                  {tags.map(({labelValue = '-'}) => (
                    <Tag color={color} style={{
                      marginBottom: 2,
                      marginRight: 2,
                      maxWidth: '100%',
                      wordWrap: 'break-word',
                      whiteSpace: 'normal',
                      height: 'auto'
                    }}>{labelValue}</Tag>
                  ))}
                </Collapse.Panel>
              );
            })}
            <div style={{width: '100%', height: '6px'}}/>
          </Collapse>
        ) : (
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
        )}
      </Card>
    </div>
  );
};

export default TagsCard;
